import { HTMLAttributes, PropsWithChildren } from 'react';
import styled from 'styled-components';

const CommandLabeledItemWrapperContainer = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 14px;
  > * {
    flex: 1;
  }
  .text-reset {
    flex: 0 0 auto;
    width: max-content;
    margin-right: 24px;
  }
`;

export const CommandLabeledItemWrapper = ({
  label,
  children,
  className,
  textClassName = 'text-text',
  ...rest
}: PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & { label: string; textClassName?: string }
>) => {
  return (
    <CommandLabeledItemWrapperContainer
      className={className}
      {...rest}>
      {label && <div className={textClassName}>{label}</div>}
      {children}
    </CommandLabeledItemWrapperContainer>
  );
};
